<template>
  <div class="userListCont">
    <el-container>
      <el-header>
<!--        地下气象-->
      </el-header>
      <el-main>

        <el-row>
          <el-col :span="8">
            <el-input v-model="searchInput" placeholder="请输入查询内容" class="home_main"></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" icon="el-icon-search" @click="findIndexPage()">搜索</el-button>
          </el-col>
          <el-col :span="13">
            <el-button type="success" plain icon="el-icon-plus" @click="userFormOpen()">新增人员</el-button>
          </el-col>
        </el-row>


        <el-table
          :data="tableData"
          style="width: 100%; height: 600px;">

          <el-table-column
            label="头像"
            width="150">
            <template slot-scope="scope">
              <el-popover
                placement="right"
                width="200"
                trigger="hover">
                <!-- 实现图片鼠标移动到上面的时候显示放大-->
                <!-- 这是放大的图片-->
                <img :src="icoTransformation(scope.row.zp, scope.row.xb)" class="imgStyle"/>
                <!-- 这是展示的图片-->
                <img slot="reference" :src="icoTransformation(scope.row.zp, scope.row.xb)" style="max-height: 30px;max-width: 100px">
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column
            prop="xm"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="xb"
            label="性别"
            :formatter="formatterSex"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sfzhm"
            label="身份证号码">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button @click="selectClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="updClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--        分页-->
        <br/>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          @size-change="sizeChange"
          :page-sizes="[5, 10, 20, 40]"
          :page-size=size
          :current-page=current
          :total=total>
        </el-pagination>

      </el-main>
    </el-container>

    <!--    查看详细信息-->
    <el-dialog
      title="详情"
      :visible="userDetailedFormVisible"
      width="80%"
      :before-close="userDetailedClose">

      <!--详情-->
      <UserDetails :rowData="rowData"
                   :userDetailedFormVisible="userDetailedFormVisible"></UserDetails>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userDetailedFormVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!--新增用户和修改-->
    <el-dialog
      destroy-on-close
      :title="userFormTitle"
      :visible="userForm"
      width="90%"
      :before-close="userFormClose">
      <UserAddUpd
        ref="uau"
        :user="user"
        :userSaveOrUpd="userSaveOrUpd"
        @userFormClose="userFormClose"
        @findIndexPage="findIndexPage"
      ></UserAddUpd>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userForm = false">取 消</el-button>
        <el-button type="primary" @click="userForm = false">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>

  import http from '@/utils/http'
  import {checkNull, readImages, setObjNull} from '@/utils/utils'
  import UserDetails from './UserDetails.vue'
  import UserAddUpd from './UserAddUpd.vue'

  export default {
    name: 'UserList',
    components: {
      // 引入其他组件
      UserDetails,
      UserAddUpd,
    },
    data() {
      return {
        // 列表数据
        tableData: [],
        // 总共多少页
        total: 0,
        // 显示第几页
        current: 1,
        // 每页显示的数量
        size: 10,
        // 个数选择器（可修改）
        // pageSizes:[10, 20, 30, 40],
        // 显示查看详情
        userDetailedFormVisible: false,
        userUpdFormVisible: false,
        // 当前被选中数据
        rowData: null,
        // 新增和修改是否打开
        userForm: false,
        // 新增和修改标题
        userFormTitle: '',
        // 用户是保存还是修改，参数是save还是upd
        userSaveOrUpd: '',
        // 输入的查询内容
        searchInput: '',
        // 用户
        user: {
          id: '',
          sfzhm: '',
          xm: '',
          xb: '',
          gj: '',
          province: '',
          city: '',
          // zp: '',
          sjcsrq: '',
          sfzid: '',
          hjdz: '',
          szdxq: '',
          szdgj: '',
          szdprovince: '',
          szdcity: '',
          szdarea: '',
          szdjd: '',
          szdjwh: '',
          ryzt: null,
          sg: '',
          tz: '',
          rz: '',
          mz: '',
          zzmmzw: '',
          zy: '',
          sshymc: '',
          hklx: '',
          jn: '',
          zhpj: '',
          zjxy: '',
          bz: '',
          zdgz: '',
          fqxm: '',
          fqsfz: '',
          mqxm: '',
          mqsfz: '',
          poxm: '',
          posfz: '',
          lxdh: '',
        }
      }
    },
    methods: {
      /**
       * 分页查询出人员
       */
      findIndexPage: function () {
        http.post("/meteorological/user/findIndexPage", {
          current: this.current,
          size: this.size,
          search: this.searchInput,

        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return
          }

          let data = res.data;
          this.total = res.data.total;
          this.current = res.data.current
          this.size = res.data.size

          // 处理数据
          this.tableData = data.records;

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 空值转换为 -
       */
      nullTransformation(str) {
        if (checkNull(str)) {
          return "-";
        }
        return str;
      },
      /**
       * 图片转换,如果头像路径为空，则展示默认图片
       * @param path 头像路径
       * @param sex 性别代码
       * @return 最终的图片路径
       */
      icoTransformation(path, sex) {
        // 照片路径为空，则展示默认图片
        if (checkNull(path)) {
          if (sex === 2) {
            path = require("@/assets/images/touXiang-nv.png");
          } else if (sex === 1) {
            path = require("@/assets/images/touXiang-nan.png");
          } else {
            // 如果没有默认图片，则使用默认的图片，引用图片必须使用 require
            path = require("@/assets/images/touXiang-zhongXing.png");
          }
          return path;

        } else {
          return readImages(path)
        }
      },
      /**
       * 每页数量被改变的时候
       * @param val 每页显示数量
       */
      sizeChange: function (val) {
        this.size = val;
        this.findIndexPage()
      },
      /**
       * 当前页被改变的时候
       * @param val 当前页
       */
      currentChange: function (val) {
        this.current = val;
        this.findIndexPage()
      },
      /**
       * 点击事件-查看详情
       * @param row 当前行数据
       */
      selectClick: function (row) {
        this.rowData = row;
        // 显示对话框
        this.userDetailedFormVisible = true;
      },
      /**
       * 删除确认
       * @param row 当前行数据
       */
      delClick: function (row) {
        this.$confirm('确认删除数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.del(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /**
       * 删除数据
       * @param row
       */
      del(row){
        http.post("/meteorological/user/delUser", {
          idList: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error') {
            this.$message.error(res.msg);
            return
          }

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.findIndexPage();


        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 修改
       * @param row 当前行数据
       */
      updClick: function (row) {
        this.userFormTitle = '修改人员'
        this.user = JSON.parse(JSON.stringify(row))
        this.userSaveOrUpd = 'upd'
        this.userForm = true;
      },
      /**
       * 转换表格中的性别
       */
      formatterSex: function (row, column) {
        if (row.xb === 1) {
          return "男"
        } else if (row.xb === 2) {
          return "女"
        } else {
          return "未知"
        }
      },
      /**
       * 关闭详情对话框
       */
      userDetailedClose() {
        this.userDetailedFormVisible = false;
      },
      /**
       * 关闭新增和修改对话框
       */
      userFormClose (){
        this.userForm = false;
      },
      /**
       * 打开新增和修改对话框
       * @param saveOrUpd
       */
      userFormOpen(){
        this.userFormTitle = '添加人员'
        this.userForm = true;
        this.userSaveOrUpd = 'save'
        this.$refs.uau.txUrl = null

        this.user = setObjNull(this.user)
      },
      /**
       * 性别转换
       * @param sexInteger 性别代码
       * */
      sexTransformation: function (sexInteger) {
        if (sexInteger === 1) {
          return "男"
        } else if (sexInteger === 2) {
          return "女"
        } else {
          return "未知"
        }
      }
    },
    mounted() {
      this.findIndexPage();
    }
  }
</script>

<style scoped>

  .userListCont {
    width: 1200px;
    margin: auto;
    text-align: center;
  }


</style>
